Beheer van schermen met de Frontend Presentation API: Multi-Display Configuratie voor Wereldwijde Applicaties

In de hedendaagse verbonden wereld zijn webapplicaties niet langer beperkt tot één enkel browservenster. De Frontend Presentation API biedt ontwikkelaars de krachtige mogelijkheid om hun applicaties uit te breiden over meerdere schermen, wat een schat aan mogelijkheden opent voor verbeterde gebruikerservaringen. Deze gids zal de fijne kneepjes van de Presentation API verkennen, met een specifieke focus op multi-display configuratie, en praktische voorbeelden geven die relevant zijn voor een wereldwijd publiek.

De Presentation API Begrijpen

De Presentation API is een webstandaard die webapplicaties in staat stelt een secundair scherm, of presentatiescherm, te gebruiken om andere content te tonen dan het primaire scherm. Dit is met name handig in scenario's zoals:

• Vergaderruimtes: Presentaties delen van een laptop naar een projector.
• Retailkiosken: Productinformatie weergeven op een groot scherm terwijl een gebruiker interactie heeft met een kleiner touchscreen.
• Digital Signage: Dynamische content uitzenden over meerdere schermen in openbare ruimtes.
• Gaming: De spelervaring uitbreiden naar een secundair scherm voor een verbeterde onderdompeling of het verstrekken van extra informatie.
• Educatieve Omgevingen: Lesmateriaal weergeven op een groot scherm terwijl studenten op individuele apparaten werken.

De API draait om de volgende sleutelconcepten:

• PresentationRequest: Een object dat wordt gebruikt om een presentatiesessie te starten.
• PresentationConnection: Een object dat de verbinding tussen de besturingspagina en de presentatiepagina vertegenwoordigt.
• PresentationReceiver: Een object op de presentatiepagina dat berichten ontvangt van de besturingspagina.

Multi-Display Configuratie Instellen

De eerste stap bij het gebruiken van de Presentation API is het detecteren van beschikbare schermen en het starten van een presentatiesessie. Hier is een overzicht van het proces:

1. Beschikbare Schermen Detecteren

De navigator.presentation.getAvailability() methode retourneert een promise die resulteert in een PresentationAvailability object. Dit object geeft aan of een presentatiescherm momenteel beschikbaar is.

            
navigator.presentation.getAvailability()
  .then(function(availability) {
    if (availability.value) {
      console.log('Presentatiescherm is beschikbaar.');
    } else {
      console.log('Presentatiescherm is niet beschikbaar.');
    }

    availability.onchange = function() {
      if (availability.value) {
        console.log('Presentatiescherm is beschikbaar gekomen.');
      } else {
        console.log('Presentatiescherm is niet meer beschikbaar.');
      }
    };
  });

            

              
                Copy
              
            
          

Dit codefragment controleert of een presentatiescherm beschikbaar is en luistert naar veranderingen in de beschikbaarheid ervan. Het is belangrijk om het onchange event af te handelen om dynamisch te reageren op veranderingen in de beschikbaarheid van presentatieschermen.

2. Een Presentatiesessie Starten

Om een presentatie te starten, maakt u een PresentationRequest object aan, waarbij u de URL van de presentatiepagina opgeeft.

            
let presentationRequest = new PresentationRequest(['presentation.html']);

presentationRequest.start()
  .then(function(connection) {
    console.log('Presentatie succesvol gestart.');
    // Behandel de presentatieverbinding
    connection.onmessage = function(event) {
      console.log('Bericht ontvangen:', event.data);
    };
    connection.onclose = function() {
      console.log('Presentatie gesloten.');
    };
    connection.onerror = function(event) {
      console.error('Presentatiefout:', event.error);
    };
  })
  .catch(function(error) {
    console.error('Starten van presentatie mislukt:', error);
  });

            

              
                Copy
              
            
          

Deze code initialiseert een presentatiesessie met presentation.html als de content die op het secundaire scherm wordt weergegeven. Vervolgens wordt er een verbinding tot stand gebracht en worden er event listeners ingesteld voor berichten, afsluiting en fouten.

3. De Presentatiepagina (PresentationReceiver)

De presentatiepagina moet worden voorbereid om berichten van de besturingspagina te ontvangen. Dit wordt bereikt met het PresentationReceiver object.

            
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    console.log('Verbinding ontvangen:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });

  connectionList.onconnectionavailable = function(event) {
    let connection = event.connection;
    console.log('Nieuwe verbinding beschikbaar:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  };
});

            

              
                Copy
              
            
          

Dit codefragment luistert naar inkomende verbindingen op de presentatie-ontvangerpagina en handelt berichten af die van de besturingspagina worden ontvangen, waarbij de inhoud van het presentatiescherm dienovereenkomstig wordt bijgewerkt.

Geavanceerde Multi-Display Configuratie

Naast de basisfunctionaliteit voor presentaties, maakt de Presentation API complexere multi-display configuraties mogelijk. Hier zijn enkele geavanceerde technieken:

1. Een Specifiek Scherm Selecteren

De Presentation API biedt geen directe manier om beschikbare schermen op te sommen en een specifieke te selecteren. U kunt echter de PresentationRequest constructor gebruiken met een array van URL's. De user agent zal dan een keuzemenu aan de gebruiker tonen, waardoor deze kan selecteren welk scherm te gebruiken.

2. Dynamische Contentupdates

De PresentationConnection.postMessage() methode maakt real-time communicatie mogelijk tussen de besturingspagina en de presentatiepagina. Dit maakt dynamische updates van de presentatie-inhoud mogelijk op basis van gebruikersinteracties of datawijzigingen.

            
// Een bericht verzenden vanaf de besturingspagina
connection.postMessage('Hallo, presentatiescherm!');

// Het bericht ontvangen op de presentatiepagina
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });
});

            

              
                Copy
              
            
          

Dit voorbeeld demonstreert het verzenden van een eenvoudig tekstbericht van de besturingspagina naar de presentatiepagina, die vervolgens zijn inhoud bijwerkt.

3. Omgaan met Verschillende Schermresoluties en Beeldverhoudingen

Bij het presenteren van content op meerdere schermen is het cruciaal om rekening te houden met de verschillende resoluties en beeldverhoudingen van de schermen. Gebruik CSS media queries en flexibele lay-outs om ervoor te zorgen dat uw content zich probleemloos aanpast aan verschillende schermformaten. Overweeg het gebruik van viewport-eenheden (vw, vh, vmin, vmax) om elementen proportioneel te schalen met de schermgrootte.

            
/* Voorbeeld CSS voor het omgaan met verschillende schermformaten */
@media (min-aspect-ratio: 16/9) {
  .content {
    width: 80vw;
    height: 90vh;
  }
}

@media (max-aspect-ratio: 4/3) {
  .content {
    width: 90vw;
    height: 75vh;
  }
}

            

              
                Copy
              
            
          

Dit CSS-voorbeeld gebruikt media queries om de afmetingen van een content-element aan te passen op basis van de beeldverhouding van het scherm.

4. Internationalisatie en Lokalisatie

Voor wereldwijde applicaties is het essentieel om rekening te houden met internationalisatie (i18n) en lokalisatie (l10n). Gebruik de juiste taaltags in uw HTML, zorg voor vertalingen van alle tekstinhoud en formatteer datums, getallen en valuta's volgens de landinstelling van de gebruiker. De Internationalization API (Intl) in JavaScript kan hierbij zeer nuttig zijn.

            
// Een getal formatteren volgens een specifieke landinstelling
let number = 1234567.89;
let formattedNumber = new Intl.NumberFormat('de-DE').format(number); // Output: 1.234.567,89

// Een datum formatteren volgens een specifieke landinstelling
let date = new Date();
let formattedDate = new Intl.DateTimeFormat('ja-JP').format(date); // Output: 2023/10/27

            

              
                Copy
              
            
          

Deze voorbeelden demonstreren hoe u getallen en datums kunt formatteren volgens verschillende landinstellingen met behulp van de Intl API.

5. Toegankelijkheidsoverwegingen

Zorg ervoor dat uw multi-display applicaties toegankelijk zijn voor gebruikers met een beperking. Zorg voor alternatieve tekst voor afbeeldingen, gebruik semantische HTML en zorg ervoor dat uw applicatie met een toetsenbord te navigeren is. Overweeg het gebruik van ARIA-attributen om de toegankelijkheid van dynamische content te verbeteren.

Praktische Voorbeelden voor Wereldwijde Applicaties

Hier zijn enkele praktische voorbeelden van hoe de Presentation API kan worden gebruikt in wereldwijde applicaties:

• Internationale Conferentiepresentaties: Een webapplicatie waarmee presentatoren dia's kunnen delen op een projector terwijl ze sprekersnotities bekijken en de presentatie beheren op hun laptop. De applicatie moet meerdere talen ondersteunen en presentatoren in staat stellen de presentatie-indeling aan te passen aan verschillende schermformaten.
• Wereldwijde Retailkiosken: Een kioskapplicatie die productinformatie op een groot scherm toont terwijl gebruikers producten kunnen doorbladeren en aankopen kunnen doen op een touchscreen. De applicatie moet meerdere valuta's, talen en betaalmethoden ondersteunen.
• Meertalige Digital Signage: Een digital signage-systeem dat dynamische content, zoals nieuwsberichten, weerupdates en advertenties, weergeeft op meerdere schermen in openbare ruimtes. De content moet automatisch worden vertaald naar de lokale taal van elk scherm.
• Collaboratief Whiteboarden voor Teams op Afstand: Een webgebaseerde whiteboard-applicatie waarmee geografisch verspreide teams in realtime kunnen samenwerken. Een secundair scherm kan een ingezoomde weergave van een specifiek gebied tonen of extra referentiemateriaal presenteren.

Codevoorbeeld: Een Eenvoudige Presentatie met Dynamische Updates

Hier is een volledig codevoorbeeld dat een eenvoudige presentatie met dynamische updates demonstreert:

Besturingspagina (index.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Presentation API Voorbeeld</title>
</head>
<body>
  <h1>Besturingspagina</h1>
  <button id="startButton">Start Presentatie</button>
  <input type="text" id="messageInput" placeholder="Voer bericht in">
  <button id="sendMessageButton">Verstuur Bericht</button>

  <script>
    let connection;
    let presentationRequest = new PresentationRequest(['presentation.html']);

    document.getElementById('startButton').addEventListener('click', function() {
      presentationRequest.start()
        .then(function(conn) {
          connection = conn;
          console.log('Presentatie succesvol gestart.');
          connection.onmessage = function(event) {
            console.log('Bericht ontvangen:', event.data);
          };
          connection.onclose = function() {
            console.log('Presentatie gesloten.');
          };
          connection.onerror = function(event) {
            console.error('Presentatiefout:', event.error);
          };
        })
        .catch(function(error) {
          console.error('Starten van presentatie mislukt:', error);
        });
    });

    document.getElementById('sendMessageButton').addEventListener('click', function() {
      if (connection) {
        let message = document.getElementById('messageInput').value;
        connection.postMessage(message);
      } else {
        alert('Presentatie niet gestart.');
      }
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Presentatiepagina (presentation.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Presentatiescherm</title>
  <style>
    body {
      font-size: 2em;
      text-align: center;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <h1>Presentatiescherm</h1>
  <div id="content"></div>

  <script>
    navigator.presentation.receiver.connectionList.then(function(connectionList) {
      connectionList.connections.forEach(function(connection) {
        console.log('Verbinding ontvangen:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      });

      connectionList.onconnectionavailable = function(event) {
        let connection = event.connection;
        console.log('Nieuwe verbinding beschikbaar:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      };
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Dit voorbeeld creëert een eenvoudige besturingspagina met een knop om de presentatie te starten en een tekstinvoer en knop om berichten naar het presentatiescherm te sturen. Het presentatiescherm ontvangt de berichten en werkt de inhoud dienovereenkomstig bij.

Veelvoorkomende Problemen Oplossen

• Presentatiescherm niet gedetecteerd: Zorg ervoor dat een secundair scherm is aangesloten en ingeschakeld in de instellingen van het besturingssysteem. Controleer de browsercompatibiliteit en update naar de nieuwste versie.
• Presentatie start niet: Controleer of de URL van de presentatie correct en toegankelijk is. Controleer op eventuele fouten in de JavaScript-console.
• Berichten worden niet ontvangen: Zorg ervoor dat de PresentationConnection correct is ingesteld en dat de onmessage event listener correct is geconfigureerd op zowel de besturingspagina als de presentatiepagina.
• Cross-Origin problemen: Als de besturingspagina en de presentatiepagina op verschillende domeinen worden gehost, zorg er dan voor dat CORS (Cross-Origin Resource Sharing) correct is geconfigureerd om communicatie tussen de origins toe te staan.

De Toekomst van de Presentation API

De Presentation API is een technologie die continu in ontwikkeling is. Toekomstige verbeteringen kunnen zijn:

• Verbeterde enumeratie en selectie van schermen.
• Meer geavanceerde controle over de lay-out en styling van presentaties.
• Verbeterde beveiligingsfuncties.
• Integratie met andere web-API's, zoals WebXR voor augmented en virtual reality-ervaringen.

Conclusie

De Frontend Presentation API biedt een krachtig mechanisme om webapplicaties uit te breiden over meerdere schermen, wat een breed scala aan innovatieve gebruikerservaringen mogelijk maakt. Door de kernconcepten van de API te begrijpen en de best practices in deze gids te volgen, kunnen ontwikkelaars boeiende en effectieve multi-display applicaties creëren voor een wereldwijd publiek. Van internationale conferentiepresentaties tot meertalige digital signage, de mogelijkheden zijn eindeloos. Omarm de kracht van de Presentation API en ontgrendel het potentieel van multi-display webapplicaties.